<template>
	<view>
		<view class="list-container">
			<!-- 复查时间 -->
			<view class="item" v-if="isReview.isReview">
				<view class="top-label">
					<view>复查时间</view>
					<view class="text-right">2024-12-10 12:02:30</view>
				</view>
			</view>
			<!-- 复查信息 -->
			<view class="item" v-if="isShowReview.isShowReview">
				<view class="top-label" @click="retract(0)">
					<view>复查信息</view>
					<view v-if="showBasicInformation[0].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[0].show">
					<view class="row">
						<view class="title">复查结果:</view>
						<view class="con">{{ form.schoolName }}</view>
					</view>
					<view class="row">
						<view class="title">复查时间:</view>
						<view class="con">{{ form.headmasterName }}</view>
					</view>
					<view class="row">
						<view class="title">复查人:</view>
						<view class="con">{{ form.schoolNature }}</view>
					</view>
				</view>
			</view>
			<!-- 复查照片 -->
			<view class="item">
				<view class="top-label" @click="retract(1)">
					<view :class="isReview.isReview ? 'requireStarBottom' : 'require'">复查照片</view>
					<view class="zi-label" v-if="isReview.isReview">{{ imgList.length }}/30</view>
					<view v-else>
						<view v-if="showBasicInformation[1].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
						<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
					</view>
				</view>
				<view class="info" v-if="showBasicInformation[1].show" style="display: flex">
					<view class="file-all">
						<view v-for="(image, index) in imgList" :key="index" style="position: relative">
							<image :src="image.url" class="file-img" @click="onPreviewImage(image, index)"></image>
							<image src="@/static/image/deletImg.png" class="delet-img" @click="delect()"></image>
						</view>
						<view @click="up" v-if="imgList && imgList.length < 30">
							<image src="@/static/image/upload.png" class="file-img"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="item item-bottom" v-if="isReview.isReview">
				<view class="top-label">
					<view class="requireStarBottom">复查结果</view>
					<view class="rectification">
						<view v-for="(item, index) in rectificationList" :key="index" @click="selectRectification(index)">
							<view :class="rectificationValue == index ? 'rectification-item-action' : 'rectification-item'">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view v-if="rectificationValue == 1" class="info">
					<view class="">
						<view style="display: flex; flex-direction: column">
							<view class="zheng-gai-zi">复查意见:</view>
							<view class="zi-bottom textAreaBox">
								<uv-textarea v-model="value" maxlength="200" count placeholder="请输入内容"></uv-textarea>
								<view class="fontCount" @click="showSpeech">
									<view>
										<image :src="imgMinioPath + '/law/yuyin.png'"></image>
									</view>
									<view></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="check-bottom-box" @click.stop v-if="isReview.isReview">
				<button class="sure-button" @click.stop="submit()">确认</button>
			</view>

			<speech-recognition ref="refSpeech" @getSpeeckInfo="getSpeeckInfo"></speech-recognition>
			<!-- 上传图片弹层 -->
			<uv-popup ref="popup" @change="change" :closeable="true">
				<view class="popup-title-1">上传方式</view>
				<view class="up-popup-content">
					<view class="select-one" @click="chooseImage">从相册选择</view>
					<view class="select-two" @click="chooseImageCamera">照片上传</view>
					<view class="bottom-box" @click.stop>
						<view @click.stop="popupSubmit()">取消</view>
					</view>
				</view>
			</uv-popup>
		</view>
	</view>
</template>

<script setup>
import speechRecognition from '@/packageDailyCheck/components/speechRecognition.vue';
import { ref, reactive, toRefs, defineProps } from 'vue';
import config from "@/common/config";
let imgMinioPath = ref(config.IMG_MINIO_PATH);

const props = defineProps({
	isReview: {
		type: Boolean,
		default: false
	},
	isShowReview:{
		type: Boolean,
		default: true
	}
});

const isReview = toRefs(props);
const isShowReview =toRefs(props)
const value = ref('');
const showBasicInformation = reactive([{ show: true }, { show: true }]);
const imgList = ref([
	{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' },
	{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }
	// { url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' },
]);
// 检查信息
const form = ref({
	schoolName: '长春第一实验幼儿园',
	headmasterName: '去过问',
	schoolNature: '公办',
	feedingMode: '自有食堂',
	cafeteriaName: '长春市第一幼儿园食堂',
	canteenPerson: '张哈哈'
});
// 复查结果选中
const rectificationValue = ref(0);
const rectificationList = ref([
	{ name: '通过', value: 1 },
	{ name: '不通过', value: 0 }
]);
function selectRectification(index) {
	rectificationValue.value = index;
}
function retract(index) {
	showBasicInformation[index].show = !showBasicInformation[index].show;
}
let onPreviewImage = (item, index) => {
	let photoList = imgList.value.map((item) => {
		return item.url;
	});
	uni.previewImage({
		// 先filter找出为图片的item，再返回filter结果中的图片url
		urls: photoList,
		current: index
	});
};
const numbersCheck = ref('0');
// 审核意见
function textareaValue() {
	var txtVal = value.value.length;
	numbersCheck.value = txtVal;
}

//语音输入
const refSpeech = ref();
const showSpeech = () => {
	refSpeech.value.open();
};

function getSpeeckInfo(val) {
	value.value += val;
}
let popup = ref();
//显示弹层
function up() {
	popup.value.open('bottom');
}
// 关闭弹层
function popupSubmit() {
	popup.value.close();
}
// 相册选择图片上传
function chooseImage() {
	uni.chooseImage({
		count: 3, // 图片数量
		sizeType: ['original', 'compressed'],
		sourceType: ['album'], //上传方式
		success: (res) => {
			fileList.value.push(res.tempFilePaths);
		},
		fail: (err) => {
			console.log('选择图片失败', err);
		}
	});
}
// 拍照上传
function chooseImageCamera() {
	uni.chooseImage({
		count: 3,
		sizeType: ['original', 'compressed'],
		sourceType: ['camera'], //上传方式
		success: (res) => {
			fileList.value.push(res.tempFilePaths);
		},
		fail: (err) => {
			console.log('选择图片失败', err);
		}
	});
}
// 图片删除
function delect() {}
// 复查确定按钮
function submit() {
	if (!imgList.value || imgList.value.length < 3) {
		uni.showToast({
			icon: 'none',
			title: '请至少上传3张复查照片'
		});
	} else if (rectificationValue.value == 1 && value.value == '') {
		uni.showToast({
			icon: 'none',
			title: '请输入复查意见'
		});
	} else if (rectificationValue.value == 0) {
		uni.showToast({
			icon: 'success',
			title: '复查完成'
		});
	}
}
</script>

<style lang="scss" scoped>
@import '@/static/css/dailycheck/viewIndex.scss';

::v-deep .textAreaBox {
	position: relative;
}

.fontCount {
	position: absolute;
	bottom: 2px;
	right: 130rpx;
	color: #9e9e9e;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	z-index: 999;

	image {
		height: 50rpx;
		width: 50rpx;
	}
}

::v-deep .requireStarBottom {
	width: 23%;
	position: relative;
}

::v-deep .requireStarBottom:after {
	position: absolute;
	right: 0;
	vertical-align: bottom; //加上星号会上下居中，不加会在上角展示
	content: ' *';
	color: rgba(255, 59, 48, 1);
	font-size: 100%;
}

::v-deep.uv-textarea__field {
	text-align: left !important;
}

.rectification {
	display: flex;
	grid-gap: 20rpx;

	.rectification-item-action {
		width: 82rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: rgba(51, 117, 246, 0.698);
		border-radius: 2px;
		font-size: 24rpx;
	}

	.rectification-item {
		background: #cccccc;
		@extend .rectification-item-action;
	}
}

.popup-title-1 {
	height: 112rpx;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #e7e7e7;
	line-height: 112rpx;
	background: #ffffff;
}

.up-popup-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 360rpx;
	background: #f5f5f5;

	.select-one {
		height: 110rpx;
		background: #ffffff;
		margin-top: -140rpx;
		text-align: center;
		border-bottom: 1px solid #e7e7e7;
		line-height: 110rpx;
	}

	.select-two {
		height: 110rpx;
		line-height: 110rpx;
		background: #ffffff;
		text-align: center;
		border-bottom: 1px solid #e7e7e7;
	}

	.bottom-box {
		height: 110rpx;
		line-height: 110rpx;
		background: #ffffff;
		text-align: center;
	}
}

.check-all {
	display: flex;
	width: 110%;
	align-items: center;
}

.check-all-ri-label {
	color: #9e9e9e;
	font-size: 24rpx;
	width: 69%;
}

.zi-label {
	color: #9e9e9e;
	font-size: 24rpx;
}

.file-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 4px;
	margin-left: 10rpx;
}

.file-all {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 10rpx;
}

.delet-img {
	height: 32rpx;
	width: 32rpx;
	position: absolute;
	right: 0;
	top: 0;
}
</style>
